// 获取数据并渲染页面
function renderCategory() {
  axios.get("/my/category/list").then((res) => {
    // console.log(res);
    let { status, data } = res.data;
    if (status === 0) {
      let str = "";
      data.forEach((item) => {
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
            <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
            <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>`;
      });
      $("tbody").html(str);
    }
  });
}
renderCategory();

// 删除功能
$("tbody").on("click", ".del", function (e) {
  e.preventDefault();
  let id = $(this).data("id");
  // 询问是否要删除
  layer.confirm("确定要删除吗?", function (index) {
    // 发送请求
    axios.get(`/my/category/delete?id=${id}`).then((res) => {
      //   console.log(res);
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 刷新页面
        renderCategory();
      }
    });
    // 关闭弹层
    layer.close(index);
  });
});

// 添加功能
let addIndex;
// 点击添加按钮出现弹层
$('button:contains("添加类别")').on("click", function () {
  addIndex = layer.open({
    type: 1,
    title: "添加类别",
    // 2. 设置弹出的内容
    content: $("#tpl-add").html(),
    area: ["500px", "250px"],
  });
});
// 表单提交,发送请求,完成添加
$("body").on("submit", "#add-form", function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post("/my/category/add", data).then((res) => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(addIndex);
    }
  });
});

// 修改功能
let editIndex;
// 点击编辑按钮,出现弹层
$("tbody").on("click", 'button:contains("编辑")', function () {
  let shuju = $(this).data();
  editIndex = layer.open({
    type: 1,
    title: "编辑类别",
    // 2. 设置弹出的内容
    content: $("#tpl-edit").html(),
    area: ["500px", "250px"],
    success: function () {
      // 3. 必须等弹层出来之后，保证表单已经存在了，input已经出现了，再数据回填
      // 使用layui的form模块，快速的数据回填
      let form = layui.form;
      form.val("edit", shuju);
    },
  });
});

// 表单提交,完成修改
$("body").on("submit", "#edit-form", function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post("/my/category/update", data).then((res) => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(editIndex);
    }
  });
});
